<template>
  <div class="app-container">
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="标签名称">
        <el-input v-model="query.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="分类名称">
        <!-- option选择后会自动绑定在select的v-model -->
        <el-select v-model="query.categoryId" clearable filterable placeholder="状态">
          <el-option :label="item.name" :value="item.id" v-for="item in category" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
        <el-button type="info" @click="reload">重置</el-button>
        <el-button type="primary" @click="openAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- stripe 带斑马纹的表格 border边框-->
    <el-table :data="list" style="width: 100%" stripe border>
      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
      <el-table-column align="center" prop="name" label="标签名称"></el-table-column>
      <el-table-column align="center" prop="name" label="分类名称"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)" type="primary">编辑</el-button>
          <el-button size="mini" @click="handleDelete(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      center
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pages.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.total"
    ></el-pagination>
    <edit
      :title="edit.title"
      :remoteClose="remoteClose"
      :category="category"
      :formData="edit.formData"
      :visible="edit.visible"
    ></edit>
  </div>
</template>
<script>
import label from "@/api/label";
import categoryApi from "@/api/category";
import Edit from "./edit";
export default {
  name: "Label",
  components: { Edit },
  data() {
    return {
      list: [],
      category: [], //下拉的数组
      pages: {
        //分页的对象
        size: 20,
        current: 1,
        total: 0
      },
      edit: {
        title: "",
        visible: false,
        // formData的用途是 点击编辑 拿到scope.row.id 去查询该条数据
        //  保存在formData 发给子元素 进行渲染  然后进行编辑的时候还会有一个id进行判断是点击的编辑弹窗还是点击的新增弹窗
        formData: {
          // name: "",
          // status: 1,
          // remark: ""
        }
      },
      query: {
        //查询的条件
        // user: "",
        // categoryId: ""
      }
    };
  },

  created() {
    this.fetchData();
    // 获取正常的分类列表数据
    this.categoryList();
  },
  methods: {
    fetchData() {
      label
        .getList(this.query, this.pages.size, this.pages.current)
        .then(res => {
          this.list = res.data.records;
          this.pages.total = res.data.total;
          console.log(res);
        });
    },
    // 获取正常的分类列表数据
    categoryList() {
      categoryApi.getNormaList().then(res => {
        this.category = res.data;
        console.log(res, "分类列表的数据是上一个标签管理的接口");
      });
    },
    // 编辑
    handleEdit(id) {
      console.log(id, "编辑");
      label.getById(id).then(res => {
        if (res.code == 20000) {
          this.edit.visible = true;
          this.edit.formData = res.data;
          this.edit.title = "编辑";
        }
      });
    },
    // 删除
    handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          label.deleteByid(id).then(res => {
            this.$message({
              type: res.code == 20000 ? "success" : "error",
              message: res.message
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      console.log(id, "删除");
    },
    // 条数
    handleSizeChange(val) {
      this.pages.size = val;
      this.fetchData();
    },
    // 页数
    handleCurrentChange(val) {
      this.pages.current = val;
      this.fetchData();
    },
    // 查询
    queryData() {
      this.pages.current = 1;
      // this.fetchData();里面含有query参数  直接发送
      this.fetchData();
      this.query = {};
    },
    // 重置
    reload() {
      this.query = {};
      this.fetchData();
    },
    // 新增
    openAdd() {
      this.categoryList();
      this.edit.title = "新增";
      this.edit.visible = true;
    },
    // 子组件触发进行关闭窗口
    remoteClose(val) {
      this.edit.formData = {};
      // 关闭弹窗
      this.edit.visible = false;
      if (val) {
        //0取消不要刷新数据  1取反
        this.fetchData();
      } else {
        return;
      }
    }
  },
  watch: {
    "query.categoryId"(newvalue, oldvalue) {
      console.log(newvalue, oldvalue);
    }
  }
};
</script>